<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from '@/utils/axios.ts'
// 正确导入方式
import { Icon as VanIcon } from 'vant';
const route = useRoute();
const router = useRouter();
const goodsList = ref([]);
const typeList = ref([]);
let state = reactive({
  isRefresh: false,
  isLoading: false,
  finished: false,
  count: 1,
})
const searchData = reactive({
  keyword:"",
})
const onLoad = () => {
  console.log("pageonload:"+data.page);
  console.log("load count:", state.count, "--", state.finished);
  if (state.count > 2) {
    state.finished = true;
    return;
  }
  state.isLoading = true;
  init();
}

const data = reactive({
  page: 1,
  size: 5, // 与后端返回的size对应
})
const init = () => {
  console.log("page1:"+data.page);
  axios.post("/api/userItems/page", {
    page: data.page++,
    size: data.size,
    keyword: searchData.keyword
  },
      {headers: {
    // 指定表单格式的Content-Type
    'Content-Type': 'application/x-www-form-urlencoded'
  }})
      .then(res => {
        console.log("page2:"+data.page);
        console.log("size:"+data.size);
        console.log("keyword: "+searchData.keyword);
        // 拼接新数据
        goodsList.value = goodsList.value.concat(res.records);
        state.isLoading = false; //标记为加载完成
        state.count++;
      })
}
onMounted(() => {
  init();
  axios.post("/api/itemCategories/getType")
      .then(res =>{
        console.log("物品分类："+res);
        typeList.value = res;
  })
})

const onRefresh = () => {
  console.log("Refresh count:", state.count, "--", state.finished);
  state.isRefresh = true;
  state.count = 1;
  state.finished = false;
  goodsList.value = []; // 清空列表
  data.page = 1; // 重置页码
  init(); // 重新加载第一页
  state.isRefresh = false;
}

const goDetail = (item) => {
  console.log("itemId:" + item.itemId)
  axios.post("/api/userItems/viewCount?id="+item.itemId);
  router.push({ name: "mDetail", params: { id: item.itemId } })
}

const handleSearch = () =>{
  goodsList.value = [];
  data.page = 1;
  state.count = 1;
  state.finished = false;
  init();
}
const handleCategoryClick = () =>{
    axios.post("/api/")
}
</script>

<template>
  <BackHeader title="邻里集市" class="back-header"></BackHeader>
  <van-pull-refresh v-model="state.isRefresh" @refresh="onRefresh">
    <van-search
        v-model="searchData.keyword"
        placeholder="请输入搜索内容"
        @search="handleSearch"
        class="van-search"
    />
    <div class="category-container">
      <div
          v-for="category in typeList"
          :key="category.categoryId"
          class="category-item"
          @click="handleCategoryClick">
        <!--    图标显示-->
        <van-icon
            :name="category.icon"
            color="#647bff"
            size="30"
            class="category-icon">
        </van-icon>
        <span class="category-name">{{ category.name }}</span>
      </div>
    </div>
    <!--  使用宫格组件，实现商品的展示  -->
    <div>
      <!-- 列表内容 -->
      <van-list
          v-model="state.isLoading"
          :finished="state.finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
        <van-grid :border="true" :column-num="2" class="grid">
          <van-grid-item v-for="item in goodsList" :key="item.itemId">
            <!-- 取第一张图片，注意images是字符串形式的数组，需要先解析 -->
            <van-image @click="goDetail(item)" width="100" height="100" :src="JSON.parse(item.images)[0]" />
            <p style="margin-top: 5px">{{ item.title }}</p>
            <p style="color: orange;margin-top: 2px">{{ item.price }}元</p>
            <p style="font-size: 12px; color: #999;">{{ item.user.building }}号楼</p>
          </van-grid-item>
        </van-grid>
      </van-list>
    </div>
  </van-pull-refresh>
</template>

<style scoped>
.category-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.category-text {
  margin-top: 4px;
}
.category-container {
  display: flex;
  justify-content: space-around;
  padding: 16px 0;
  background-color: #fff;
  overflow-x: auto; /* 当分类过多时允许横向滚动 */
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 8px;
  cursor: pointer;
}

.category-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa; /* 图标背景色 */
  border-radius: 50%; /* 圆形背景 */
}

.category-name {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
}
</style>